<template>
	<view class="order" style="height: 100vh;">
		<!-- 导航 -->
		<!-- <u-navbar back-icon-color="#000000" title="订单详情" title-color="#3F3F3F" :title-bold="true" :border-bottom="false"
		 :background="background"></u-navbar> -->
		<u-navbar back-text="取消订单" :back-text-style="textStyle" back-icon-color="#000000" style="font-weight: bold;font-family: PingFang SC;"></u-navbar>
		<!-- end -->
		<view v-if="pageType == 1" style="background-color: #F8F8F8;">
			<view class="allorder" style="width: 95%;margin:22rpx auto;border-radius: 20rpx;background-color: white;">
				<view style="width: 95%;margin:0rpx auto;padding: 15rpx 0rpx;">
					<view style="width: 100%;margin: auto;overflow: hidden;padding: 20rpx 0 25rpx 0;border-bottom: 1rpx solid #E4E4E4;">
						<view style="float: left;">
							<view style="display: flex;">
								<image style="width: 38rpx;height:38rpx;" mode="aspectFill" :src="details.entPortrait"></image>
								<view style="color: #3F3F3F;font-size:30rpx;font-weight: bold;margin-left: 10rpx;">{{ details.orderName }}</view>
							</view>
						</view>
						<view style="float: right;color: #3F3F3F;font-size:30rpx;font-weight: bold;">{{ details.orderStatus }}</view>
					</view>
					<view class="orders" style="">
						<image :src="details.orderImg" mode="aspectFill" class="order_img" style="width: 138rpx;height:138rpx;"></image>
						<view class="person">
							<view class="dianming">{{ details.businessName }}</view>
							<view class="hour" style=" color: #979797;font-size: 26rpx;">
								<view>购买数量：{{ details.amount }}</view>
							</view>
							<view style="overflow: hidden;width: 100%;">
								<view class="hour" style="float: left; color: #979797;font-size: 26rpx;">
									<view>金额：{{ details.totalPay }}</view>
								</view>
							</view>
						</view>
					</view>
					<!-- 服务时长： -->
					<view style="margin: 26rpx 0;line-height: 60rpx;">
						<u-row>
							<!-- <u-col span="5"><text class="typeface1">服务时长：</text></u-col> -->
							<u-col span="12" @click="durationShow = true">
								<text class="typeface5">{{ cacleFrom.name ? cacleFrom.name : '请选择取消原因' }}</text>
								<u-icon name="arrow-right" style="margin-left: 20rpx;float: right;margin-top: 16rpx;" label-size="32"></u-icon>
							</u-col>
						</u-row>
					</view>
					<view style="width: 94%;margin: 0 auto;background-color: #FAFAFA;position: relative; " class="textDemo">
						<textarea
							maxlength="150"
							v-model="cacleFrom.remark"
							placeholder-style="padding:0 14rpx;"
							placeholder="请描述取消订单的原因"
							type="textarea"
							height="110"
						/>
						<view style="position: absolute;bottom: 8rpx;right: 10rpx;color: #828282;">{{ cacleFrom.remark.length }}/150</view>
					</view>
				</view>
			</view>
			<!-- 底部提交 -->
			<view style="position: fixed;bottom: 15rpx;width: 100%;">
				<view style="width: 92%;margin: 0 auto;">
					<view @click="goMadeOrder" style="font-size: 32rpx; background-color: #FCA800;border-radius: 20rpx;height: 80rpx;line-height: 80rpx;color: #fff;text-align: center;">提交</view>
				</view>
			</view>

			<!-- 选择服务时长 -->
			<u-select
				v-model="durationShow"
				:default-value="cacleFrom.name"
				:list="durationList"
				title="请选择取消原因"
				confirm-text="确认"
				confirm-color="#FCC800"
				@confirm="getDuration"
			></u-select>
		</view>
		<!-- 提交成功 -->
		<view v-if="pageType == 2" style="width: 100%;background-color: #fff;">
			<view style="width: 92%;margin: 0 auto; text-align: center;padding-top: 25%;">
				<image src="https://beedao.oss-cn-beijing.aliyuncs.com/8b3bce0fcf814c789373fd6a17e43b0c.png" style="width: 102px;height: 106px;" mode=""></image>
				<view style="color: #3F3F3F;font-size: 40rpx;line-height: 70rpx;margin-bottom: 34rpx;margin-top: 5%;">
					提交成功{{details.statusName == "待支付"?'取消订单成功':'取消成功，您支付的金额将会在1个工作日内退回'}}
				</view>
				<view style="width: 45%;margin: 0 auto;">
					<view @click="accomplish" style="border:1rpx solid #FCA800;width: 100%;border-radius: 15rpx;background-color: #fff;color: #FCA800;height: 80rpx;line-height: 80rpx;">
						完成
					</view>
				</view>
			</view>
		</view>
		<!-- 提交成功结束 -->
	</view>
</template>

<script>
export default {
	data() {
		return {
			pageType:1,
			durationShow: false,
			durationList: [
				{
					value: '商家联系我电话下单',
					label: '商家联系我电话下单'
				},
				{
					value: '临时有事无法保证时间',
					label: '临时有事无法保证时间'
				},
				{
					value: '地址填错了',
					label: '地址填错了'
				},
				{
					value: '服务信息选择错误',
					label: '服务信息选择错误'
				},
				{
					value: '其他原因',
					label: '其他原因'
				}
			], //选择取消订单的原因
			details: {},
			cacleFrom: {
				name: '',
				remark: ''
			} //取消订单参数
		};
	},
	onLoad(option) {
		var that = this;
		that.details = JSON.parse(option.form);
	},
	onShow() {},
	methods: {
		// 点击完成回到上一页
		accomplish(){
			
			uni.navigateBack({
				delta:1
			})
		},
		//点击选择的取消原因
		getDuration: function(val) {
			this.cacleFrom.name = val[0].value;
			this.durationShow = false;
		},
		// 取消订单
		goMadeOrder(){
			let _this = this;
			if(_this.cacleFrom.name == ""){
				uni.showToast({
					title:"请先选择取消原因",
					mask:true,
					icon:'none',
					duration:2000
				});
				return false;
			}
			uni.showModal({
				title: '',
				content: '确定要取消该订单吗？',
				cancelText: '我再想想', // 取消按钮的文字
				confirmText: '确认', // 确认按钮文字
				cancelColor: '#F29423',
				confirmColor: '#979797',
				success: function(res) {
					if (res.confirm) {
						let opts = {
							way: true, //true JSON请求；false 表单请求
							method: 'post',
							url: 'unit-orders/cancelOrder'
						};
						let data = {
							orderId: _this.details.orderId,
							platformType: _this.details.statusName == "待支付"?3:4,
							reason: _this.cacleFrom.name,
							remark: _this.cacleFrom.remark,
						};
						_this.http.httpTokenRequest(opts, data).then(res => {
							if (res.code == '200') {
								_this.pageType=2;
								let pages = getCurrentPages();  //获取所有页面栈实例列表
								let prevPage = pages[ pages.length - 2 ];  //上一页页面实例
								let upPage = pages[ pages.length - 3 ];  //上一页页面实例
								upPage.$vm.isMade = 1;
								prevPage.$vm.isMade = 1;
							}else{
								uni.showToast({
									title:res.message,
									mask:true,
									icon:'none',
									duration:2000
								})
							}
						});
					}
				}
			});
			
		},

	}
};
</script>

<style scoped lang="scss">
.orders {
	width: 100%;
	display: flex;
	border-bottom: 1rpx solid #e4e4e4;
	padding-bottom: 38rpx;
	margin-top: 38rpx;
}

.orders image {
	width: 170rpx;
	height: 168rpx;
}

.orders .order_img {
	width: 222rpx;
	height: 222rpx;
	// border-radius: 32rpx;
}

.person {
	padding-left: 32rpx;
}

.style {
	padding-top: 24rpx;
	font-size: 26rpx;
	color: #979797;
	font-weight: 500;
}

.pad {
	padding-left: 18rpx;
}

.hour {
	color: #f29423;
	font-size: 26rpx;
	padding-top: 20rpx;
	font-weight: 500;
	font-family: PingFang SC;
}

.textDemo textarea {
	padding: 14px 25rpx !important;
	height: 200rpx;
	width: 100%;
}
</style>
